<template>
	<bc-table v-bind="tableConfig" ref="tableRef">
		<template #search>
			<bc-form
				v-bind="searchFormConfig"
				:inline="true"
				v-model="tableConfig.searchParams"
			></bc-form>
		</template>
		<template #total>
			<span>支付总金额</span>
			: 1000
			<span>元支付总手续费元支付总手续费</span>
			： 30000 元
		</template>
	</bc-table>
</template>
<script lang="ts" setup>
	import { reactive, ref, getCurrentInstance } from 'vue';
	import { uploadApi, getListApi } from '@/api';
	import { shortcuts, disabledDate } from '@/utils';
	import {
		bankCardFormat,
		cardFormat,
		isCard,
		isMobile,
		isSMs,
		mobileFormat,
		noNumericToBlank,
	} from '@fe-hl/utils';

	let Instance: any = getCurrentInstance()?.proxy;
	let tableRef = ref();
	let tableConfig = reactive<any>({
		searchParams: {},
		reqApiMethod: getListApi,
		butClickEvent: (config, rows) => {
			console.log(config, rows);
			Instance.$bcDialogForm({
				formConfig,
			});
		},
		headerButs: [
			{
				butType: 'CREATE',
				name: '新增',
				color: 'primary',
				permi: [],
				icon: 'Plus',
			},
			{
				butType: 'UPDATE',
				name: '修改',
				enable: '1',
				color: 'success',
				permi: [],
				icon: 'Edit',
			},
			{
				butType: 'QUERY',
				name: '查看',
				enable: '1',
				color: 'warning',
				permi: [],
				icon: 'View',
			},
			{
				butType: 'DELETE',
				name: '删除',
				enable: '2',
				color: 'danger',
				permi: [],
				icon: 'Delete',
			},
			{
				butType: 'EXPORT',
				name: '导出',
				color: 'warning',
				permi: [],
				icon: 'Download',
			},
		],
		tableButs: [
			{
				butType: 'CREATE',
				name: '新增',
				color: 'primary',
				permi: [],
				icon: 'Plus',
			},
			{
				butType: 'UPDATE',
				name: '修改',
				enable: '1',
				color: 'success',
				permi: [],
				icon: 'Edit',
			},
			{
				butType: 'QUERY',
				name: '查看',
				enable: '1',
				color: 'warning',
				permi: [],
				icon: 'View',
			},
			{
				butType: 'DELETE',
				name: '删除',
				enable: '2',
				color: 'danger',
				permi: [],
				icon: 'Delete',
			},
			{
				butType: 'EXPORT',
				name: '导出',
				color: 'warning',
				permi: [],
				icon: 'Download',
			},
		],
		columns: [
			{
				type: 'selection',
			},
			{
				type: 'index',
			},
			{
				title: '印章名称',
				field: 'sealName',
			},
			{
				title: '印章图片',
				preview: true,
				field: 'sealImage',
			},
		],
	});
	const searchFormConfig = reactive<any>({
		labelWidth: 120,
		labelPosition: 'right',
		handlerUpload: async (file: any, formConfig: any) => {
			console.log(formConfig);
			let formData = new FormData();
			formData.append('file', file.file);
			let res = await uploadApi(formData);
			return Promise.resolve(res.data.urls);
		},
		handlerSubmit: (formModels: any) => {
			console.log(formModels);
			return tableRef.value.fetchData({ isResetPageNumber: true });
		},
		formModelValues: {
			mobilePhone: '17621959589',
		},
		formConfigList: [
			{
				componentType: 'text',
				label: '手机号格式化',
				type: 'text',
				placeholder: '请输入手机号',
				key: 'mobilePhone',
				formatter: mobileFormat,
				maxlength: 13,
				rules: [
					{
						required: false,
						message: '请输入合法的11位手机号',
						validator: (rule: any, value: any, callback: any) => {
							if (!isMobile(value.replace(/\s/gi, ''))) {
								callback(new Error('请输入合法的11位手机号'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				label: '身份证',
				type: 'text',
				placeholder: '请输入身份证',
				key: 'card',
				formatter: cardFormat,
				maxlength: 20,
				rules: [
					{
						required: false,
						message: '请输入合法18位身份证号',
						validator: (rule: any, value: any, callback: any) => {
							if (!isCard(value.replace(/\s/gi, ''))) {
								callback(new Error('请输入合法18位身份证号'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				label: '银行卡号',
				type: 'text',
				placeholder: '请输入银行卡号',
				key: 'bankCard',
				formatter: bankCardFormat,
				maxlength: 24,
				rules: [{ required: false, message: '请输入银行卡号' }],
			},

			{
				componentType: 'text',
				type: 'text',
				label: '商户号',
				formatter: noNumericToBlank,
				placeholder: '请输入商户号',
				key: 'mercId',
				rules: [{ required: false, message: '请填写用户名' }],
			},

			{
				componentType: 'select',
				label: '选择城市',
				placeholder: '选择城市',
				key: 'select',
				confirmCallback: (formModel: any, formModels: any, opt: any) => {
					console.log(formModel);
					console.log(formModels);
					console.log(opt);
				},
				options: [
					{ label: '杭州', value: 'Hangzhou' },
					{ label: '宁波', value: 'Ningbo' },
					{ label: '温州', value: 'Wenzhou' },
					{ label: '绍兴', value: 'Shaoxing' },
					{ label: '湖州', value: 'Huzhou' },
				],
				rules: [{ required: false, message: '选择城市' }],
			},
			{
				componentType: 'select',
				label: '选择城市1',
				placeholder: '选择城市',
				key: 'select1',
				remote: true,
				getOptions: () => {
					let list = [
						{ label: '杭州1222', value: 'Hangzhou' },
						{ label: '宁波2', value: 'Ningbo' },
						{ label: '温州', value: 'Wenzhou' },
						{ label: '绍兴', value: 'Shaoxing' },
						{ label: '湖州', value: 'Huzhou' },
					];
					return Promise.resolve(list);
				},
				confirmCallback: (formModel: any, formModels: any, opt: any) => {
					console.log(formModel);
					console.log(formModels);
					console.log(opt);
				},
				rules: [{ required: false, message: '选择城市111' }],
			},
			{
				componentType: 'date',
				type: 'daterange',
				dateFormat: 'YYYY-MM-DD',
				label: '时间选择',
				placeholder: '选择时间选择',
				shortcuts: shortcuts,
				disabledDate: disabledDate,
				defaultValue: ['2022-12-12', '2022-12-12'],
				key: 'dateRange',
				rules: [{ required: false, message: '选择时间选择' }],
			},
		],
	});

	const formConfig = reactive<any>({
		labelWidth: 120,
		labelPosition: 'right',
		handlerUpload: async (file: any, formConfig: any) => {
			console.log(formConfig);
			let formData = new FormData();
			formData.append('file', file.file);
			let res = await uploadApi(formData);
			return Promise.resolve(res.data.urls);
		},
		handlerSubmit: (formModels: any) => {
			console.log(formModels);
			return tableRef.value.fetchData({ isResetPageNumber: true });
		},
		formModelValues: {
			mobilePhone: '17621959589',
		},
		formConfigList: [
			{
				componentType: 'text',
				label: '手机号格式化',
				type: 'text',
				placeholder: '请输入手机号',
				key: 'mobilePhone',
				formatter: mobileFormat,
				maxlength: 13,
				rules: [
					{
						required: false,
						message: '请输入合法的11位手机号',
						validator: (rule: any, value: any, callback: any) => {
							if (!isMobile(value.replace(/\s/gi, ''))) {
								callback(new Error('请输入合法的11位手机号'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				label: '身份证',
				type: 'text',
				placeholder: '请输入身份证',
				key: 'card',
				formatter: cardFormat,
				maxlength: 20,
				rules: [
					{
						required: false,
						message: '请输入合法18位身份证号',
						validator: (rule: any, value: any, callback: any) => {
							if (!isCard(value.replace(/\s/gi, ''))) {
								callback(new Error('请输入合法18位身份证号'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				label: '银行卡号',
				type: 'text',
				placeholder: '请输入银行卡号',
				key: 'bankCard',
				formatter: bankCardFormat,
				maxlength: 24,
				rules: [{ required: false, message: '请输入银行卡号' }],
			},
			{
				label: '验证码',
				componentType: 'sms',
				type: 'text',
				formatter: noNumericToBlank,
				placeholder: '请输入验证码',
				beforeValidateKey: ['mobilePhone'],
				key: 'smsCode',
				handlerCountdown: countdown => {
					countdown();
				},
				maxlength: 6,
				rules: [
					{
						required: false,
						message: '请输入6位数字验证码',
						validator: (rule: any, value: any, callback: any) => {
							if (!isSMs(value)) {
								callback(new Error('请输入6位数字验证码'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				type: 'text',
				label: '商户号',
				formatter: noNumericToBlank,
				placeholder: '请输入商户号',
				key: 'mercId',
				rules: [{ required: false, message: '请填写用户名' }],
			},
			{
				componentType: 'switch',
				label: '开关',
				defaultValue: true,
				key: 'off',
			},
			{
				componentType: 'checkbox',
				label: '复选框组',
				key: 'checkboxs',
				rules: [{ required: false, message: '请填写复选框组' }],

				options: [
					{
						label: '男',
						value: 1,
					},
					{
						label: '女',
						value: 2,
					},
				],
			},
			{
				componentType: 'radio',
				label: '单选框',
				key: 'radio',
				defaultValue: 'm',
				rules: [{ required: false, message: '请填写单选框' }],
				options: [
					{
						label: '男',
						value: 's',
					},
					{
						label: '女',
						value: 'm',
					},
				],
			},
			{
				componentType: 'stepper',
				label: '步进器',
				key: 'stepper',
				rules: [{ required: false, message: '请填写步进器' }],
			},
			{
				componentType: 'rate',
				label: '评分',
				key: 'rate',
				rules: [{ required: false, message: '请填写评分' }],
			},
			{
				componentType: 'slider',
				label: '滑块',
				key: 'slider',
				rules: [{ required: false, message: '滑块' }],
			},
			{
				componentType: 'select',
				label: '选择城市',
				placeholder: '选择城市',
				key: 'select',
				confirmCallback: (formModel: any, formModels: any, opt: any) => {
					console.log(formModel);
					console.log(formModels);
					console.log(opt);
				},
				options: [
					{ label: '杭州', value: 'Hangzhou' },
					{ label: '宁波', value: 'Ningbo' },
					{ label: '温州', value: 'Wenzhou' },
					{ label: '绍兴', value: 'Shaoxing' },
					{ label: '湖州', value: 'Huzhou' },
				],
				rules: [{ required: false, message: '选择城市' }],
			},
			{
				componentType: 'select',
				label: '选择城市1',
				placeholder: '选择城市',
				key: 'select1',
				remote: true,
				getOptions: () => {
					let list = [
						{ label: '杭州1222', value: 'Hangzhou' },
						{ label: '宁波2', value: 'Ningbo' },
						{ label: '温州', value: 'Wenzhou' },
						{ label: '绍兴', value: 'Shaoxing' },
						{ label: '湖州', value: 'Huzhou' },
					];
					return Promise.resolve(list);
				},
				confirmCallback: (formModel: any, formModels: any, opt: any) => {
					console.log(formModel);
					console.log(formModels);
					console.log(opt);
				},
				rules: [{ required: false, message: '选择城市111' }],
			},
			{
				componentType: 'date',
				type: 'daterange',
				dateFormat: 'YYYY-MM-DD',
				label: '时间选择',
				placeholder: '选择时间选择',
				shortcuts: shortcuts,
				disabledDate: disabledDate,
				defaultValue: ['2022-12-12', '2022-12-12'],
				key: 'dateRange',
				rules: [{ required: false, message: '选择时间选择' }],
			},
			{
				componentType: 'uploader',
				label: '文件上传',
				maxCount: 5,
				key: 'uploader',
				tip: 'jpg/png files with a size less than 2000KB',
				rules: [{ required: false, message: '请填写文件上传' }],
				beforeRead: file => {
					console.log(file);
					return true;
				},
			},
		],
	});
</script>
